/*
=====================================================================
* Sparrow v1.0 Default Stylesheet
* url: styleshout.com
* 02-07-2014
=====================================================================
TOC:
a. Webfonts and Icon fonts
b. Reset
c. Default Styles
1. Basic
2. Typography
3. Links
4. Images
5. Buttons
6. Forms
d. Grid
e. Others
1. Clearing
2. Misc
===================================================================== */
/* ------------------------------------------------------------------ */
/* a. Webfonts and Icon fonts
------------------------------------------------------------------ */
@import url("fonts.css");
@import url("font-awesome/css/font-awesome.min.css");
/* ------------------------------------------------------------------
/* b. Reset
Adapted from:
Normalize.css - https://github.com/necolas/normalize.css/
HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/
/* ------------------------------------------------------------------ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
.zero-margin {
margin: 0;
}
/* sim nao */
.sim {
background: #2C4E22;
color: white;
}
.nao {
background: #8C2729;
color: white;
}
/* Alert Boxes
/* ------------------------------------------------------------------ */
#alert-message-success, #alert-message-error {
position: fixed;
top: 0px;
text-align: center;
display: none;
left: 0px;
border-radius:0px;
width: 100%;
margin: auto;
padding: 75px 0px;
vertical-align: middle;
z-index: 999999999999999999;
}
.alert-box {
font: 14px/24px 'montserrat-bold', sans-serif;
display: inline-block;
text-decoration: none;
letter-spacing: 0;
padding: 12px 20px;
margin-top:0px;
margin-bottom: 18px;
border: none;
cursor: pointer;
height: auto;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 3px;
}
.cheio {
width: 100%;
}
.error {
background-color: #ffd1d2;
color: #e65153;
}
.success {
background-color: #c8e675;
color: #758c36;
}
.fixo {
background-color: rgba(245,163,8,1.00);
color: white;
}
.with-bottom-line {
text-align: center;
position: relative;
overflow: hidden;
padding-bottom: 20px;
}
.with-bottom-line::after {
display: block;
background-color: #F57D00;
width: 120px;
height: 3px;
content: '\0020';
position: absolute;
left: 50%;
bottom: 0;
margin-left: -60px;
}
audio,
canvas,
video {
display: inline-block;
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] { display: none; }
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
blockquote, q { quotes: “ “ }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #A7F4F6;
color: #555;
}
del { text-decoration: line-through; }
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 999999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 100%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.component {
width: 100%;
overflow: hidden;
}
.component .filler {
font-family: "Blokk", Arial, sans-serif;
color: #d3d3d3;
}
table {
border-collapse: collapse;
margin-bottom: 1em;
width: 100%;
background: #fff;
vertical-align: middle;
}
td, th {
padding: 0.40em 1.0em;;
}
.req td, th {
padding: 0.10em 0.3em;
}
td.err {
background-color: #e992b9;
color: #fff;
font-size: 0.75em;
text-align: center;
line-height: 1;
}
th {
background-color: #0D0F54;
font-weight: bold;
color: #fff;
white-space: nowrap;
}
tbody th {
background-color: rgba(1,40,67,0.5);
}
tbody tr:nth-child(2n-1) {
background-color: #f5f5f5;
transition: all .125s ease-in-out;
}
tbody tr:hover {
background-color: rgba(195,218,255,0.9);
}
.divtab input[type="text"],
.divtab input[type="number"],
.divtab input[type="date"],
.divtab input[type="password"],
.divtab input[type="email"],
.divtab input[type="url"],
.divtab textarea,
.divtab select,
td input[type="text"],
td input[type="url"],
td input[type="number"],
td input[type="date"],
td input[type="password"],
td input[type="email"],
td input[type=checkbox],
td textarea,
td select {
display: block;
border: 1px solid #ccc;
color: #616161;
background: #fff;
box-shadow: none !important;
width: 100%;
font-size: 0.85em;
font-weight: 300;
border-radius: 0;
resize: none;
padding: 13px 10px;
margin: 0 0 0px 0;
}
.divtab button#salvar,
.divtab input#salvar[type="submit"],
.divtab input#salvar[type="reset"],
.divtab input#salvar[type="button"],
td button#salvar,
td input#salvar[type="submit"],
td input#salvar[type="reset"],
td input#salvar[type="button"] {
background-color: rgba(255,255,255,0.00);
color: blue;
padding: 0;
margin: 0;
border-radius: 0;
}
input[type=checkbox] {
display: none;
}
checkbox label:before {
border-radius: 3px;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
/* For appearance */
.sticky-wrap {
overflow-x: auto;
overflow-y: hidden;
position: relative;
margin: 1em 0;
width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all .125s ease-in-out;
z-index: 50;
width: auto; /* Prevent table from stretching to full size */
}
.sticky-wrap .sticky-thead {
box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
z-index: 100;
width: 100%; /* Force stretch */
}
.sticky-wrap .sticky-intersect {
opacity: 1;
z-index: 150;
}
.sticky-wrap .sticky-intersect th {
background-color: #666;
color: #eee;
}
.sticky-wrap td,
.sticky-wrap th {
box-sizing: border-box;
}
/* Not needed for sticky header/column functionality */
td.user-name {
text-transform: capitalize;
}
.sticky-wrap.overflow-y {
overflow-y: auto;
max-height: 50vh;
}
/* ------------------------------------------------------------------ */
/* c. Default and Basic Styles
Adapted from:
Skeleton CSS Framework - http://www.getskeleton.com/
Typeplate Typographic Starter Kit - http://typeplate.com/
/* ------------------------------------------------------------------ */
/* 1. Basic ------------------------------------------------------- */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body {
background: #fff;
font-family: notosans-regular, sans-serif;
font-size: 15px;
line-height: 30px;
color: #838C95;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}
/* 2. Typography
Vertical rhythm with leading derived from 6
--------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
color: #313131;
font-family: raleway-bold, sans-serif;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 { font-weight: inherit; }
h1 { font-size: 42px; line-height: 48px; margin-bottom: 12px;}
h2 { font-size: 30px; line-height: 42px; margin-bottom: 6px; }
h3 { font-size: 24px; line-height: 30px; margin-bottom: 12px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 6px; }
h5 { font-size: 18px; line-height: 30px; }
h6 { font-size: 14px; line-height: 30px; }
h7 { font-size: 42px; line-height: 48px; }
.subheader { }
p { margin: 0 0 30px 0; }
p img { margin: 0; }
p.lead {
font: 20px/36px raleway-regular, sans-serif;
margin-bottom: 18px;
color: #9FA5AD;
}
/* for 'em' and 'strong' tags, font-size and line-height should be same with
the body tag due to rendering problems in some browsers */
em { font: 15px/30px notosans-italic, sans-serif; }
strong, b { font: 15px/30px notosans-bold, sans-serif; }
small { font-size: 11px; line-height: inherit; }
/* Blockquotes */
blockquote {
margin: 30px 0px;
padding-left: 40px;
position: relative;
}
blockquote:before {
content: "\201C";
opacity: 0.45;
font-size: 80px;
line-height: 0px;
margin: 0;
font-family: arial, sans-serif;
position: absolute;
top: 30px;
left: 0;
}
blockquote p {
font-style: italic;
padding: 0;
font-size: 18px;
line-height: 30px;
}
blockquote cite {
display: block;
font-size: 12px;
font-style: normal;
line-height: 18px;
}
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a,
blockquote cite a:visited { color: #8B9798; border: none }
/* ---------------------------------------------------------------------
/* Pull Quotes Markup
/*
/*
/* --------------------------------------------------------------------- */
.pull-quote {
position: relative;
padding: 18px 30px 18px 0px;
}
.pull-quote:before,
.pull-quote:after {
height: 1em;
opacity: 0.45;
position: absolute;
font-size: 80px;
font-family: Arial, Sans-Serif;
}
.pull-quote:before {
content: "\201C";
top: 33px;
left: 0;
}
.pull-quote:after {
content: '\201D';
bottom: -33px;
right: 0;
}
.pull-quote blockquote {
margin: 0;
}
.pull-quote blockquote:before {
content: none;
}
/* Abbreviations */
abbr {
font-family: notosans-bold, sans-serif;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: .5px;
color: gray;
}
abbr:hover { cursor: help; }
/* drop cap */
.drop-cap:first-letter {
float: left;
margin: 0;
padding: 14px 6px 0 0;
font-size: 84px;
font-family: /* Copperplate */ raleway-bold, sans-serif;
line-height: 60px;
text-indent: 0;
background: transparent;
color: inherit;
}
hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; }
/* 3. Links ------------------------------------------------------- */
a, a:visited {
text-decoration: none;
outline: 0;
color: #11ABB0;
-webkit-transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
}
a:hover, a:focus { color: #313131; }
p a, p a:visited { line-height: inherit; }
/* 4. List --------------------------------------------------------- */
ul, ol { margin-bottom: 24px; margin-top: 12px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 6px 0 6px 30px; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { }
li p { }
/* ---------------------------------------------------------------------
/* Stats Tab Markup
Extend this object into your markup.
/*
/* --------------------------------------------------------------------- */
.stats-tabs {
padding: 0;
margin: 24px 0;
}
.stats-tabs li {
display: inline-block;
margin: 0 10px 18px 0;
padding: 0 10px 0 0;
border-right: 1px solid #ccc;
}
.stats-tabs li:last-child {
margin: 0;
padding: 0;
border: none;
}
.stats-tabs li a {
display: inline-block;
font-size: 22px;
font-family: notosans-bold, sans-serif;
border: none;
color: #313131;
}
.stats-tabs li a:hover {
color:#11ABB0;
}
.stats-tabs li a b {
display: block;
margin: 6px 0 0 0;
font-size: 13px;
font-family: notosans-regular, sans-serif;
color: #8B9798;
}
/* counter
------------------------------------------ */
#counter {
width: 90%;
color: gray;
text-align: center;
margin: 18px auto 0;
}
#counter span {
font: 62px/1em "notosans-regular", sans-serif;
display: block;
padding: 12px 0 30px;
min-width: 25%;
float: left;
}
#counter span em {
font: 11px/18px "notosans-regular", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 3px;
display: block;
color: rgba(75, 75, 75, 0.6);
}
@media only screen and (max-width:900px) {
#counter {
width: 92%;
}
#counter span {
font: 58px/1em "notosans-regular", sans-serif;
}
}
@media only screen and (max-width:768px) {
#counter {
width: 100%;
}
#counter span {
font: 52px/1em "notosans-regular", sans-serif;
}
}
@media only screen and (max-width:600px) {
#counter {
margin-bottom: 24px;
}
#counter span {
font: 48px/1em "notosans-regular", sans-serif;
}
}
@media only screen and (max-width:500px) {
#counter {
margin-bottom: 12px;
}
#counter span {
font: 37px/1em "notosans-regular", sans-serif;
}
#counter span em {
font: 9px/18px "notosans-regular", sans-serif;
letter-spacing: 1.5px;
}
}
@media only screen and (max-width:400px) {
#counter span {
font: 31px/1em "notosans-regular", sans-serif;
}
#counter span em {
font: 8px/18px "notosans-regular", sans-serif;
letter-spacing: 1px;
}
}
/* definition list */
dl { margin: 12px 0; }
dt { margin: 0; color:#11ABB0; }
dd { margin: 0 0 0 20px; }
/* Lining Definition Style Markup */
.lining dt,
.lining dd {
display: inline;
margin: 0;
}
.lining dt + dt:before,
.lining dd + dt:before {
content: "\A";
white-space: pre;
}
.lining dd + dd:before {
content: ", ";
}
.lining dd:before {
content: ": ";
margin-left: -0.2em;
}
/* Dictionary Definition Style Markup */
.dictionary-style dt {
display: inline;
counter-reset: definitions;
}
.dictionary-style dt + dt:before {
content: ", ";
margin-left: -0.2em;
}
.dictionary-style dd {
display: block;
counter-increment: definitions;
}
.dictionary-style dd:before {
content: counter(definitions, decimal) ". ";
}
/* Pagination */
.pagination {
margin: 36px auto;
text-align: center;
}
.pagination ul li {
display: inline-block;
margin: 0;
padding: 0;
}
.pagination .page-numbers {
font: 15px/18px notosans-bold, sans-serif;
display: inline-block;
padding: 6px 10px;
margin-right: 3px;
margin-bottom: 6px;
color: #6E757C;
background-color: #E6E8EB;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
.pagination .page-numbers:hover {
background: #838A91;
color: #fff;
}
.pagination .current,
.pagination .current:hover {
background-color: #11ABB0;
color: #fff;
}
.pagination .inactive,
.pagination .inactive:hover {
background-color: #E6E8EB;
color: #A9ADB2;
}
.pagination .prev, .pagination .next {}
/* 5. Images --------------------------------------------------------- */
img {
max-width: 100%;
height: auto;
}
img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }
/* 6. Buttons --------------------------------------------------------- */
.button,
.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
font: 16px/30px notosans-bold, sans-serif;
background: #11ABB0;
display: inline-block;
text-decoration: none;
letter-spacing: 0;
color: #fff;
padding: 12px 24px;
margin-bottom: 18px;
border: none;
cursor: pointer;
height: auto;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background: #3d4145;
color: #fff;
}
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
background: #3d4145;
color: #fff;
}
.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
margin-top: 10px;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
}
.button.blue {
background: #2A80B9;
color: #FFF;
}
.button.blue:hover {
background: #3d4145;
}
.button.yellow {
background: #EEAD0E;
color: #fff;
}
.button.yellow:hover {
background: #3d4145;
color:#fff;
}
.button.red {
background: #E84C3D;
color: #fff;
}
.button.red:hover {
background: #3d4145;
color:#fff;
}
.button.doc {
background: #A6181A;
color: #fff;
font-size: 36px;
font-weight: bold;
}
.button.doc:hover {
background: #C92326;
color:#fff;
}
.button.doc2 {
background: #1FB17D;
color: #fff;
font-size: 36px;
font-weight: bold;
}
.button.doc2:hover {
background: #262626;
color:#fff;
}
.button.green {
background: #52BE80;
color: #fff;
}
.button.green:hover {
background: #3d4145;
color:#fff;
}
.button.darkgreen {
background: #3BA046;
color: #fff;
}
.button.darkgreen:hover {
background: #3d4145;
color:#fff;
}
.button.extensao {
background: #038E87;
font-size: 42px;
line-height: 95%;
font-weight: bold;
padding: 30px;
color: #fff;
}
.button.extensao:hover {
background: #036356;
font-size: 42px;
line-height: 95%;
font-weight: bold;
color: #fff;
}
.button.logado {
background: #52BE80;
color: #fff;
}
.button.logado:hover {
background: #52BE80;
color:#fff;
}
.button.purple {
background: #8538C4;
color: #fff;
}
.button.purple:hover {
background: #333;
color: #fff;
}
.button.orange {
background: #FE8805;
color: #fff;
}
.button.orange:hover {
background: #333;
color:#fff;
}
/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
.button.ext {
border-radius: 0px; box-shadow: 3px 3px 3px rgba(50,50,50,0.2); padding: 20px; width:100%; font-size: 18px;
}
.button.ext:hover {
font-size:20px;
}
.button.ext.red {
background: darkred;
}
.button.ext.red:hover {
background: #520001;
}
/* 7. Forms --------------------------------------------------------- */
form { margin-bottom: 24px; }
fieldset { margin-bottom: 24px; }
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea,
select {
display: block;
padding: 15px 12px;
margin: 0 0 20px 0;
border: 0;
outline: none;
vertical-align: middle;
max-width: 100%;
font-size: 13px;
line-height: 10px;
color: #647373;
background: #D3D9D9;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
input[type="text2"],
input[type="number"]
{
display: block;
padding: 13px 10px;
margin: 0 0 10px 0;
border: 0;
outline: none;
vertical-align: middle;
width:100%;
max-width:100%;
font-size: 13px;
line-height: 10px;
color: #647373;
background: #D3D9D9;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
input[type="text3"] {
display: block;
padding: 5px 5px;
margin: 0 0 5px 5px;
border: 0;
outline: none;
vertical-align: middle;
width:90%;
font-size: 13px;
line-height: 5px;
color: #647373;
background: #D3D9D9;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
/* select { padding: 0;
width: 220px;
} */
input[type="text"]:focus,
input[type="text2"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
color: #B3B7BC;background-color: #3d4145;
}
textarea { min-height: 70px; }
label,
legend {
font: 16px/24px notosans-bold, sans-serif;
margin: 12px 0;
color: #3d4145;
display: block;
}
label span,
legend span {
color: #8B9798;
font: 14px/24px notosans-regular, sans-serif;
}
.radio {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.checkbox {
position: static;
display: block;
margin-top: 10px;
margin-bottom: 10px;
padding: 50px;
}
.radio label,
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
cursor: not-allowed;
}
.left {
text-align: left;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
cursor: not-allowed;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
/* ------------------------------------------------------------------ */
/* d. Grid
---------------------------------------------------------------------
gutter = 40px.
/* ------------------------------------------------------------------ */
/* default
--------------------------------------------------------------- */
.row {
width: 96%;
max-width: 1020px;
margin: 0 auto;
}
.geral {
width: 98%;
background:#FFFFFF;
margin: 0 auto;
padding: 10px;
}
/* fixed width for IE8 */
.ie .row { width: 1000px ; }
/* fixed width for IE8 */
.ie .geral { width: 98% ; }
.narrow .row { max-width: 980px; }
.narrow .geral { max-width: 98%; }
.row .row { width: auto; max-width: none; margin: 0 -20px; }
.geral .geral { width: auto; max-width: none; margin: 0 -20px; }
/* row clearing */
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.geral:before,
.geral:after {
content: " ";
display: table;
}
.geral:after {
clear: both;
}
.column, .columns {
position: relative;
padding: 0 20px;
min-height: 1px;
float: left;
}
.column.centered, .columns.centered {
float: none;
margin: 0 auto;
}
/* removed gutters */
.row.collapsed > .column,
.row.collapsed > .columns,
.geral.collapsed > .column,
.geral.collapsed > .columns,
.column.collapsed, .columns.collapsed { padding: 0; }
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: right; }
/* column widths */
.row .one { width: 8.33333%; }
.row .two { width: 16.66667%; }
.row .three { width: 25%; }
.row .four { width: 33.33333%; }
.row .five { width: 41.66667%; }
.row .six { width: 50%; }
.row .seven { width: 58.33333%; }
.row .eight { width: 66.66667%; }
.row .nine { width: 75%; }
.row .ten { width: 83.33333%; }
.row .eleven { width: 91.66667%; }
.row .twelve { width: 100%; }
/* column widths */
.geral .one { width: 8.33333%; }
.geral .two { width: 16.66667%; }
.geral .three { width: 25%; }
.geral .four { width: 33.33333%; }
.geral .five { width: 41.66667%; }
.geral .six { width: 50%; }
.geral .seven { width: 58.33333%; }
.geral .eight { width: 66.66667%; }
.geral .nine { width: 75%; }
.geral .ten { width: 83.33333%; }
.geral .eleven { width: 91.66667%; }
.geral .twelve { width: 100%; }
/* Offsets */
.row .offset-1 { margin-left: 8.33333%; }
.row .offset-2 { margin-left: 16.66667%; }
.row .offset-3 { margin-left: 25%; }
.row .offset-4 { margin-left: 33.33333%; }
.row .offset-5 { margin-left: 41.66667%; }
.row .offset-6 { margin-left: 50%; }
.row .offset-7 { margin-left: 58.33333%; }
.row .offset-8 { margin-left: 66.66667%; }
.row .offset-9 { margin-left: 75%; }
.row .offset-10 { margin-left: 83.33333%; }
.row .offset-11 { margin-left: 91.66667%; }
/* Offsets */
.offset-1 { margin-left: 8.33333%; }
.geral .offset-2 { margin-left: 16.66667%; }
.geral .offset-3 { margin-left: 25%; }
.geral .offset-4 { margin-left: 33.33333%; }
.geral .offset-5 { margin-left: 41.66667%; }
.geral .offset-6 { margin-left: 50%; }
.geral .offset-7 { margin-left: 58.33333%; }
.geral .offset-8 { margin-left: 66.66667%; }
.geral .offset-9 { margin-left: 75%; }
.geral .offset-10 { margin-left: 83.33333%; }
.geral .offset-11 { margin-left: 91.66667%; }
/* Push/Pull */
.row .push-1 { left: 8.33333%; }
.row .pull-1 { right: 8.33333%; }
.row .push-2 { left: 16.66667%; }
.row .pull-2 { right: 16.66667%; }
.row .push-3 { left: 25%; }
.row .pull-3 { right: 25%; }
.row .push-4 { left: 33.33333%; }
.row .pull-4 { right: 33.33333%; }
.row .push-5 { left: 41.66667%; }
.row .pull-5 { right: 41.66667%; }
.row .push-6 { left: 50%; }
.row .pull-6 { right: 50%; }
.row .push-7 { left: 58.33333%; }
.row .pull-7 { right: 58.33333%; }
.row .push-8 { left: 66.66667%; }
.row .pull-8 { right: 66.66667%; }
.row .push-9 { left: 75%; }
.row .pull-9 { right: 75%; }
.row .push-10 { left: 83.33333%; }
.row .pull-10 { right: 83.33333%; }
.row .push-11 { left: 91.66667%; }
.row .pull-11 { right: 91.66667%; }
/* Push/Pull */
.geral .push-1 { left: 8.33333%; }
.geral .pull-1 { right: 8.33333%; }
.geral .push-2 { left: 16.66667%; }
.geral .pull-2 { right: 16.66667%; }
.geral .push-3 { left: 25%; }
.geral .pull-3 { right: 25%; }
.geral .push-4 { left: 33.33333%; }
.geral .pull-4 { right: 33.33333%; }
.geral .push-5 { left: 41.66667%; }
.geral .pull-5 { right: 41.66667%; }
.geral .push-6 { left: 50%; }
.geral .pull-6 { right: 50%; }
.geral .push-7 { left: 58.33333%; }
.geral .pull-7 { right: 58.33333%; }
.geral .push-8 { left: 66.66667%; }
.geral .pull-8 { right: 66.66667%; }
.geral .push-9 { left: 75%; }
.geral .pull-9 { right: 75%; }
.geral .push-10 { left: 83.33333%; }
.geral .pull-10 { right: 83.33333%; }
.geral .push-11 { left: 91.66667%; }
.geral .pull-11 { right: 91.66667%; }
/* block grids
--------------------------------------------------------------------- */
.bgrid-sixths [class*="column"] { width: 16.66667%; }
.bgrid-quarters [class*="column"] { width: 25%; }
.bgrid-five [class*="column"] { width: 20%; }
.bgrid-thirds [class*="column"] { width: 33.33333%; }
.bgrid-halves [class*="column"] { width: 50%; }
.bgrid-one [class*="column"] { width: 100%; }
[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; }
/* Left clearing for block grid columns - columns that changes width in
different screen sizes. Allows columns with different heights to align
properly.
--------------------------------------------------------------------- */
.first { clear: left; } /* first column in default screen */
.s-first { clear: none; } /* first column in smaller screens */
/* smaller screens
--------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
/* block grids on small screens */
.s-bgrid-sixths [class*="column"] { width: 16.66667%; }
.s-bgrid-five [class*="column"] { width: 20%; }
.s-bgrid-quarters [class*="column"] { width: 25%; }
.s-bgrid-thirds [class*="column"] { width: 33.33333%; }
.s-bgrid-halves [class*="column"] { width: 50%; }
.s-bgrid-one [class*="column"] { width: 100%; }
/* block grids left clearing */
.first { clear: none; }
.s-first { clear: left; }
}
/* mobile wide/smaller tablets
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
.row {
width: 480px;
margin: 0 auto;
padding: 0;
}
.geral {
width: 98%;
margin: 0 auto;
padding: 0;
}
.column, .columns {
width: auto !important;
float: none;
margin-left: 0;
margin-right: 0;
padding: 0 30px;
}
.row .row { width: auto; max-width: none; margin: 0 -30px; }
.geral .geral { width: auto; max-width: none; margin: 0 -30px; }
[class*="column"] + [class*="column"]:last-child { float: none; }
[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }
/* Offsets */
.row .offset-1 { margin-left: 0%; }
.row .offset-2 { margin-left: 0%; }
.row .offset-3 { margin-left: 0%; }
.row .offset-4 { margin-left: 0%; }
.row .offset-5 { margin-left: 0%; }
.row .offset-6 { margin-left: 0%; }
.row .offset-7 { margin-left: 0%; }
.row .offset-8 { margin-left: 0%; }
.row .offset-9 { margin-left: 0%; }
.row .offset-10 { margin-left: 0%; }
.row .offset-11 { margin-left: 0%; }
.geral .offset-1 { margin-left: 0%; }
.geral .offset-2 { margin-left: 0%; }
.geral .offset-3 { margin-left: 0%; }
.geral .offset-4 { margin-left: 0%; }
.geral .offset-5 { margin-left: 0%; }
.geral .offset-6 { margin-left: 0%; }
.geral .offset-7 { margin-left: 0%; }
.geral .offset-8 { margin-left: 0%; }
.geral .offset-9 { margin-left: 0%; }
.geral .offset-10 { margin-left: 0%; }
.geral .offset-11 { margin-left: 0%; }
}
/* mobile narrow
--------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
.row { width: auto; }
.geral { width: auto; }
}
/* larger screens
--------------------------------------------------------------- */
@media screen and (min-width: 1200px) {
.wide .row { max-width: 1180px; }
.wide .geral { max-width: 98%; }
}
/* ------------------------------------------------------------------ */
/* e. Others
/* ------------------------------------------------------------------ */
/* 1. Clearing
(http://nicolasgallagher.com/micro-clearfix-hack/
--------------------------------------------------------------------- */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/* 2. Misc -------------------------------------------------------- */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 12px !important; }
.add-bottom { margin-bottom: 24px !important; }
.no-border { border: none; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.align-center {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/***** --- */
input[type=checkbox] {
visibility: visible;
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.me-select .check {
position: relative;
margin: 0 auto;
max-width: 100%;
}
.me-select .check ul {
list-style: none;
padding: 0;
width: 100%;
}
.me-select .check li {
margin: 0 auto;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.me-select .check li.selected {
box-shadow: inset 0 0 0 40px rgba(255,246,0,0.1);
}
.me-select .check label {
display: inline-block;
width: 100%;
position: relative;
font-size: 1.2em;
padding: 0px 10px 0px 80px;
vertical-align: top;
cursor: pointer;
}
.me-select .check label span {
vertical-align: middle;
display: inline-block;
}
.me-select .check input[type="checkbox"],
.me-select .check label::before,
.me-select .check input[type="checkbox"]:checked + label::after {
width: 26px;
height: 26px;
top: 50%;
left: 20px;
margin-top: -13px;
position: absolute;
cursor: pointer;
}
.me-select .check input[type="checkbox"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}
.me-select .check label::before {
content: '';
border: 2px solid rgba(0,0,0,0.3);
}
.me-select .check input[type="checkbox"]:checked + label::after {
content: '\2716';
text-align: center;
line-height: 28px;
background: #ccc;
color: white;
}
.me-select .check .red input[type="checkbox"]:checked + label::after {
content: '\2716';
text-align: center;
line-height: 28px;
background: red;
color: white;
}
.me-select .check .green input[type="checkbox"]:checked + label::after {
content: '\2716';
text-align: center;
line-height: 28px;
background: green;
color: white;
}
/* Media Queries */
@media screen and (max-width: 50em) {
section {
font-size: 80%;
}
}